<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>
<template>
  <div style="transform: translate(0)">
    <button @click="dialogVisible = true">按钮</button>
    <!-- 1. 使用Teleport 组件包裹
      2. 提供to属性指定要传送的位置, to属性的值可以写css选择 类选择器 id选择器
     -->
    <Teleport to="body">
      <XtxDialog title="提示" v-model:visible="dialogVisible">
        <template #default>
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </template>
        <template #footer>
          <XtxButton type="primary" size="mini" @click="dialogVisible = false"
            >确认</XtxButton
          >
          <XtxButton type="gray" size="mini" @click="dialogVisible = false"
            >取消</XtxButton
          >
        </template>
      </XtxDialog>
    </Teleport>
  </div>
</template>

<style scoped></style>
